<template>
	<view class="rfeeds">
		<view class="one-feeds-box mar" v-for="(feedsList,index) in showFeedsList" :key="index">
			<view class="one-feed" v-for="(item,i) in feedsList" :key="i"
				:class="i%6 === 0 ? (index%2 ===0 ? 'feed-big-left' : 'feed-big-right') : ''">
				<!-- i%6===0? 第一张大图   index%2===0? 放在左边或右边  -->
				<navigator :url="'/subpages/feedinfo?obj='+JSON.stringify(item)">
					<image :src="item.img" class="feed-content" mode="aspectFill" :lazy-load="true" />
				</navigator>
			</view>
		</view>
		<!-- 分享按钮组件 -->
		<!-- <goto-share /> -->
		<!-- <comment :oneInfo="feedsList" type="feed"> -->
	</view>
</template>

<script>
	// 引入评论组件
	// import comment from "@/components/comment.vue"
	export default {
		data() {
			return {
				//动态列表数据
				feedsList: [],
				//展示栅格系统的数组
				showFeedsList: []
			}
		},
		components:{
			// comment
		},
		onLoad() {
			this.getFeeds()
		},
		//下拉刷新
		onPullDownRefresh() {
			//下拉后清空数据，提供更好的用户体验
			this.feedsList = []
			this.showFeedsList = []
			
			this.getFeeds()
		},
		//滚动到底部，请求数据，追加到后面
		onReachBottom() {
			this.getFeeds()
		},
		methods: {
			async getFeeds() {
				let res = await this.$u.api.getDynamic()
				// console.log('我是动态的页面的数据：',res.recommend);
				let feeds = res.recommend.map(item => {
					return item
				})
				this.feedsList = [...this.feedsList,...feeds]
				// console.log('我是data的',this.feedsList);
				let showArrList = []
				for (let i = 0; i < this.feedsList.length; i++) {
					//分为两个数组，每个数组中存在6个数据
					if (i % 6 === 0 && this.feedsList[i + 5]) {
						// slice 不会改变原数组
						showArrList.push(this.feedsList.slice(i, i + 6))
					}
				}
				this.showFeedsList = showArrList
				console.log('000000',this.showFeedsList);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rfeeds {
		background-color: #FFFFFF;
		padding-bottom: 20upx;
		.mar{
			    margin-bottom: 10px !important;
		}
		.one-feeds-box {
			width: 704upx;
			margin: 4upx 22upx 0 22upx;
			// 定义栅格布局
			display: grid;
			// 定义栅格每一列的宽度
			grid-template-columns: 232upx 232upx 232upx;
			// 定义栅格每一行的高度
			grid-template-rows: 232upx 232upx 232upx;
			// grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）
			grid-row-gap: 4upx;
			grid-column-gap: 4upx;
			background-color: #DADADA;

			.one-feed {
				// margin-bottom: 20px;
				position: relative;

				.feed-content {
					width: 232upx;
					height: 232upx;
					border: 1px solid #EEEEEE;
					border-radius: 4upx;
				}

				.icon {
					position: absolute;
					right: 10upx;
					top: 10upx;

					.play-icon {
						width: 40upx;
						height: 40upx;
					}
				}

				&.feed-big-left {
					grid-column-start: 1;
					grid-column-end: 3;
					grid-row-start: 1;
					grid-row-end: 3;
					background-color: #DADADA;

					.feed-content {
						width: 466upx;
						height: 466upx;
						border: 1px solid #EEEEEE;
					}
				}

				&.feed-big-right {
					grid-column-start: 2;
					grid-column-end: 4;
					grid-row-start: 1;
					grid-row-end: 3;
					background-color: #DADADA;

					.feed-content {
						width: 466upx;
						height: 466upx;
						border: 1px solid #EEEEEE;
					}
				}
			}
		}
	}
</style>
